<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
      <div style="display: flex;flex-direction: column;gap: 10px">
        <t-row :gutter="[16, 16]">
          <t-col :xs="12" :xl="12">
            <t-card title="成果类型" >
              <chart-view  :chartOption="resultChartOpt1"
                          :autoResize="false" height="78vh"/>
            </t-card>
          </t-col>
        </t-row>
      </div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      achievementList:[
        '论文',
        '著作',
        '专利',
        '软件著作权',
        '获奖',
        '工法',
        '其他'
      ],
      resultChartOpt1:{},
    }
  },
  created() {
    this.getAllCgCount();
  },
  methods: {
    getAllCgCount(){
      this.$api.cgzh.home.getAllCgCount().then(response => {
        const xdata = Object.keys(response.data)
        this.resultChartOpt1 = this.$eChartFn.getBarChart(xdata, Object.values(response.data),{},'个');
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.card {
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .title {
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card {
  height: 100%;
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>

